<template>
    <div>
        <Header v-if="showHeader" title="招商考核"></Header>
        <div ref="topWarp" class="top-warp">
            <FlexList :flexIconList="flexIconList"></FlexList>
        </div>
         <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
        <mescroll-vue ref="collapseListMescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <div id="collapseLists">
                <ListCollapse switchShow="sevenDelay" :collapseList="collapseList"></ListCollapse>
            </div>
        </mescroll-vue>
    </div>
</template>
<script>
import Header from "@/components/Header.vue";
import MescrollVue from 'mescroll.js/mescroll.vue';
import FlexList from "@/components/business/FlexList.vue";
import ListCollapse from '@/components/business/ListCollapse.vue';
import { historyV3 } from "@/request/api.js";
export default {
    name:'Business',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            flexIconList:[
                {text:'我要申请',icon:require('@/assets/images/icon1.png'),url:'/applicationDelay'},
                {text:'我发起的',icon:require('@/assets/images/icon2.png'),url:'/sponsoredDelay'},
                {text:'我审批的',icon:require('@/assets/images/icon3.png'),url:'/accraditationDelay'},
                {text:'下属员工',icon:require('@/assets/images/icon4.png'),url:'/subordinatesDelay'}
            ],
            collapseList:[],
            mescroll: null,
            mescrollDown:{}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: {
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    limit: 10 // 每页数据的数量
                },
                noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                    // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
                    warpId: 'collapseLists', // 父布局的id;
                    tip: '没有更多了~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            },
        }
    },
    components:{ FlexList, ListCollapse, Header, MescrollVue},
    created(){
        if (this.$route.query.staffer_id) {
            console.log(this.$route.query.staffer_id)
            let id = this.$route.query.staffer_id;
            localStorage.setItem('staffer_id',id);
            this.$store.commit('setStaffer_id',id);
        }
        if (this.$route.query.token) {
            console.log(this.$route.query.token)
            let token = this.$route.query.token;
            localStorage.setItem('token',token);
            this.$store.commit('setToken',token);
        }
    },
    mounted(){
        if (this.showHeader) {
            this.$refs.topWarp.style.top = 44 + 'px'
            this.$refs.collapseListMescroll.$el.style.top = 138 + 'px'
        }
    },
    methods:{
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page,mescroll) {
            // console.log('pages'+page.num)
            // 联网加载数据
            historyV3({token:this.$store.state.token,staffer_id:this.$store.state.staffer_id,page:page.num,page_num:page.limit}).then(res=>{
                console.log(res)
                let list = res.data.history;
                // let result = [];
                if(list){
                    // list.map(item=>{
                    //     for (let key in item) {
                    //         if (item.hasOwnProperty(key) && key==='targets') {
                    //             let arr = item[key];
                    //             arr.map(curArr=>{
                    //                 if (Number(curArr.app_open_time.real_target) >= Number(curArr.app_open_time.target)) {
                    //                     curArr.app_open_time.percentage = 100;
                    //                 }else if (Number(curArr.app_open_time.real_target)<Number(curArr.app_open_time.target)) {
                    //                     curArr.app_open_time.percentage = (Number(curArr.app_open_time.real_target)/Number(curArr.app_open_time.target)).toFixed(2)*100;
                    //                 }
                    //                 if (Number(curArr.reg_user.real_target)>=Number(curArr.reg_user.target)) {
                    //                     curArr.reg_user.percentage = 100;
                    //                 }else if (Number(curArr.reg_user.real_target) < Number(curArr.reg_user.target)) {
                    //                     curArr.reg_user.percentage = (Number(curArr.reg_user.real_target)/Number(curArr.reg_user.target)).toFixed(2)*100;
                    //                 }
                    //                 if (Number(curArr.tm_article_share.real_target) >= Number(curArr.tm_article_share.target)) {
                    //                     curArr.tm_article_share.percentage = 100;
                    //                 }else if (Number(curArr.tm_article_share.real_target)<Number(curArr.tm_article_share.target)) {
                    //                     curArr.tm_article_share.percentage = (Number(curArr.tm_article_share.real_target)/Number(curArr.tm_article_share.target)).toFixed(2)*100;
                    //                 }
                    //                 if (Number(curArr.five_day_money.real_target) >= Number(curArr.five_day_money.target)) {
                    //                     curArr.five_day_money.percentage = 100;
                    //                 }else if (Number(curArr.five_day_money.real_target) < Number(curArr.five_day_money.target)) {
                    //                     curArr.five_day_money.percentage = (Number(curArr.five_day_money.real_target)/Number(curArr.five_day_money.target)).toFixed(2)*100;
                    //                 }
                    //             })
                    //         }
                    //     }
                    //     result.push(item) 
                    // })
                    // 如果是第一页需手动置空列表
                    if (page.num === 1) this.collapseList = []
                    // 把请求到的数据添加到列表
                    this.collapseList = this.collapseList.concat(list)
                    
                };
                // 数据渲染成功后,隐藏下拉刷新的状态
                    this.$nextTick(() => {
                        mescroll.endSuccess(list.length)
                    })
            }).catch(error=>{
                console.log(error);
                mescroll.endErr()
            })
        },
    },
}
</script>
<style lang="less" scoped>
.top-warp{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 94px;
    background-color: #fff;
    box-sizing: border-box;
}
.mescroll {
    position: fixed;
    top: 95px;
    bottom: 0;
    height: auto;
    background-color: #f7f7f7;
}
</style>